<template>
  <div>
    <LayoutPanel
      :title="$t('subAccount.tabtil')"
      class="private-common-wrapper"
    >
      <rj-table
        bordered
        :loading="loading"
        :columns="columns"
        :data-source="tableData"
        @change="handleChange"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @refeshTable="refreshTable"
      >
        <div slot="customBlock" class="log-opt-wrapper">
          <a-button
            type="primary"
            @click="showModal($t('subAccount.addtil'))"
            class="button"
          >
            {{ $t('subAccount.title1') }}
          </a-button>
          <!-- <a-input-search
            :placeholder="$t('authDevice.ipAndName')"
            v-model="queryParamObj.devIpAndName"
            @change="onChangeSearch"
            style="width: 200px"
          /> -->
        </div>
        <template slot="roleCode" slot-scope="text">
          <div class="role" :class="text.toLowerCase()">
            {{ getRoleName(text) }}
          </div>
        </template>
        <template slot="accountType" slot-scope="text">
          <div class="role" :class="text.toLowerCase()">
            {{ getPermissionName(text) }}
          </div>
        </template>
        <template slot="timeColumn" slot-scope="text">
          {{ formatDate(text) }}
        </template>
        <!-- 操作 -->
        <template slot="action" slot-scope="text, record">
          <rj-space>
            <a-icon
              style="font-size: 15px"
              type="delete"
              @click="delSub(record)"
          /></rj-space>
        </template>
      </rj-table>
    </LayoutPanel>
    <!--添加或修改表单 -->
    <AddModal :title="modalTitle" @addCallback="addCallback" ref="child" />
    <SuccessModal ref="successModalRef" />
  </div>
</template>

<script>
import LayoutPanel from '@views/common/deviceDetail/components/components/layoutPanel.vue';
import { requestHttp, maccApi } from '@utils/index';
import { RjTable } from '@components';
import AddModal from './components/addModal';
import SuccessModal from './components/successModal';
import moment from 'moment-timezone';

export default {
  name: 'SubAccount',
  components: {
    'rj-table': RjTable,
    AddModal,
    SuccessModal,
    LayoutPanel,
  },
  data() {
    return {
      queryParamObj: {},
      placeholder1: this.$t('subAccount.placeholder1'),
      placeholder2: this.$t('subAccount.placeholder2'),
      searchNet: '',
      timeZone: '',
      title: this.$t('subAccount.tabtil'),
      search: '',
      iconLoading: false,
      tableData: [],
      columns: [
        {
          title: this.$t('common.username'),
          dataIndex: 'account',
        },
        {
          title: this.$t('subAccount.role'),
          dataIndex: 'roleCode',
          scopedSlots: { customRender: 'roleCode' },
        },
        {
          title: this.$t('subAccount.permission'),
          dataIndex: 'accountType',
          scopedSlots: { customRender: 'accountType' },
        },
        {
          title: this.$t('subAccount.fullname'),
          dataIndex: 'userName',
        },
        {
          title: this.$t('common.createdAt'),
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'timeColumn' },
        },
        {
          title: this.$t('common.action'),
          dataIndex: 'action',
          align: 'center',
          width: 150,
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      isEdit: false,
      // 分页
      current: 1,
      page_index: 1,
      page_size: 10,
      totalCount: null,
      // 添加弹窗
      modalTitle: this.$t('subAccount.addtil'),
      loading: false,

      subAccountRecord: {},
    };
  },
  mounted() {
    this.timeZone = this.$store.state.User.userInfo.timeZone;
    this.searchAccount();
  },
  methods: {
    getPermissionName(permission) {
      switch (permission) {
        case 'writer':
          return this.$t('subAccount.readWrite');
        case 'reader':
          return this.$t('subAccount.readOnly');
        default:
          return '';
      }
    },
    getRoleName(role) {
      switch (role) {
        case 'EMPLOYEE':
          return this.$t('subAccount.employee');
        case 'VISITOR':
          return this.$t('subAccount.guest');
        default:
          return '';
      }
    },
    formatDate(updateTime) {
      return updateTime ? moment(updateTime).format('YYYY-MM-DD HH:mm:ss') : '';
    },
    // 顶部搜索
    onSearch() {
      console.log(this.searchNet);
    },
    // 搜素用户
    async searchAccount() {
      console.log(this.search);
      this.loading = true;
      var api =
        maccApi.SUBACCOUNT_LIST_GET_API +
        `/?page=${this.page_index}&per_page=${this.page_size}`;

      var data = {
        api: api,
        method: 'GET',
      };
      let res = await requestHttp(data);
      this.loading = false;
      if (res && res.code == 0) {
        //TODO
        console.log(res);
        this.tableData = res.list;
        this.totalCount = res.totalCount;
      } else {
        this.$message.warning(res.msg);
      }
    },
    addCallback(accountRecord) {
      if (accountRecord) {
        this.getSubAccountList();
        this.$refs.successModalRef.openModal(accountRecord);
      }
    },
    // 表格更改
    handleChange(value) {
      this.page_index = value.current;
      this.page_size = value.pageSize;
      this.getSubAccountList();
    },
    // 获取表格信息
    getSubAccountList() {
      this.searchAccount();
    },
    // 刷新
    refreshTable() {
      this.getSubAccountList();
    },
    // 打开表单
    showModal(title) {
      console.log(this.$store.state.User.userInfo);
      this.modalTitle = title;
      this.$nextTick(() => {
        this.$refs.child.isEdit = false;
        this.$refs.child.visible = true;
      });
    },
    // 删除账号
    delSub(record) {
      this.$confirm({
        content: this.$t('userManage.deleteRecord'),
        onOk: () => {
          this.delSubAccount(record.accountId);
          //this.getSubAccountList();
        },
        onCancel() {},
      });
    },
    async delSubAccount(accountId) {
      var data = {
        api: maccApi.SUBACCOUNT_DEL_API,
        method: 'DELETE',
        replaces: {
          accountId,
        },
      };
      let res = await requestHttp(data);
      if (res && res.code == 0) {
        //TODO
        this.$message.success(this.$t('common.delSuccess'));
        this.getSubAccountList();
      } else {
        this.$message.warning(res.msg);
      }
    },
  },
};
</script>

<style scoped lang="less">
.log-opt-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.role {
  border: 1px solid #d5e1ff;
  background-color: #eaf0ff;
  color: #2b6afd;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 2px;
  display: inline-block;
  &.employee,
  &.writer {
    border: 1px solid #d7efd7;
    background-color: #ebf7eb;
    color: #38b137;
  }
}
</style>
